npm - lakelib - Versions diffs - 0.0.6 → 0.1.0 - Mend

lakelib 0.0.6 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md CHANGED Viewed

@@ -1,82 +1,34 @@
-> This project is not complete yet, please DO NOT integrate it into your production.
 # Lake
-Lake is a rich text editor for the web. It has a good user experience and provides easy-to-use programming interface to allow further extension.
-### Getting Started
-#### Downloading Lake from CDN
-Compressed copies of Lake files are available, you can download them from jsDelivr or UNPKG.
+[![CI](https://github.com/lakejs/lake/actions/workflows/ci.yml/badge.svg)](https://github.com/lakejs/lake/actions)
+[![npm](https://img.shields.io/npm/v/lakelib)](https://npmjs.org/package/lakelib)
+[![size](https://badgen.net/bundlephobia/minzip/lakelib?style=flat-square)](https://bundlephobia.com/package/lakelib)
-* jsDelivr: https://www.jsdelivr.com/package/npm/lakelib?path=dist&tab=files
-* UNPKG: https://unpkg.com/browse/lakelib@latest/dist/
-Note: `lake.min.js` is not built with CodeMirror, so if you need the code block feature, addtioanaly including `codemirror.min.js` to your page is needed. But if you do not need it, there is no need to include external CodeMirror file. To find out more, take a look at the [IIFE example](https://github.com/lakejs/lake/blob/master/examples/iife.html) and [Rollup configuration](https://github.com/lakejs/lake/blob/master/rollup.config.mjs).
-#### Downloading Lake using npm
-Lake is registered as a package on npm. You can install the latest version of Lake with the following npm command.
-```bash
-npm install lakelib
-```
+---
-#### Quick start
-First, add the following lines of code in the `<head>` of an HTML page.
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lakelib@latest/dist/lake.css" />
-<script src="https://cdn.jsdelivr.net/npm/lakelib@latest/dist/lake.min.js"></script>
-```
-Then, in the HTML page add the following HTML code that will serve as a placeholder for an editor instance.
-```html
-<div class="lake-editor">
-  <div class="lake-toolbar-root"></div>
-  <div class="lake-root"></div>
-</div>
-```
-Finally, call the following JavaScript code to render the editor.
+Lake is a rich text editor for the web. It has a good user experience and provides easy-to-use programming interface to allow further extension.
-```js
-const toolbar = new Lake.Toolbar({
-  root: '.lake-toolbar-root',
-});
-const editor = new Lake.Editor({
-  root: '.lake-root',
-  toolbar,
-});
-editor.render();
-```
+[Examples](https://lakejs.org/examples/) · [Getting started](https://lakejs.org/guide/getting-started.html) · [Reference](https://lakejs.org/reference/)
-### Development
+## Development
 To build Lake or change source code, you need to download the repository and start a development server that contains an HTTP service and real-time bundling.
 ``` bash
-# clone the repository
+# Clone the repository
 git clone https://github.com/lakejs/lake.git
-# change your directory
-cd lake
-# install all dependencies
+# Install dependencies
 pnpm install
-# build CodeMirror
-pnpm build:codemirror
-# start a local server
+# Start a local server
 pnpm dev
 ```
 You can now view all demos by visiting `http://localhost:8080/examples/`.
-### Running tests
+## Running tests
-Lake uses a lot of browser APIs and therefore it requires a real browser environment to run the tests. You can open `http://localhost:8080/tests/` to run all test cases visibly, or execute `pnpm test` command in your console to run the tests in headless mode. Both modes require starting the local server before running tests.
+Lake uses a lot of browser APIs and therefore it requires a real browser environment to run the tests. You can open `http://localhost:8080/tests/` to run all test cases visibly, or execute `pnpm test` command in your console to run the tests in headless mode.
-### License
+## License
-[MIT](https://github.com/lakejs/lake/blob/master/LICENSE)
+[MIT](https://github.com/lakejs/lake/blob/main/LICENSE)

package/dist/lake.css CHANGED Viewed

@@ -33,9 +33,11 @@
 }
 .lake-container {
+  box-sizing: content-box;
   font-family: var(--font-family);
   font-size: 16px;
-  color: var(--text-color);
+  font-weight: normal;
+  line-height: normal;
   padding: 16px 24px;
 }
 .lake-container:focus {
@@ -91,10 +93,11 @@
   background-color: #0000000a;
 }
-.lake-button {
+button.lake-button {
+  box-sizing: content-box;
   border-radius: 5px;
   border: 0;
-  font-family: var(--font-family);
+  font-family: Arial;
   font-size: 14px;
   color: var(--text-color);
   background-color: #fff;
@@ -104,41 +107,42 @@
   cursor: pointer;
   user-select: none;
 }
-.lake-button:focus-visible {
+button.lake-button:focus-visible {
   outline: var(--button-outline);
 }
-.lake-button[disabled] {
+button.lake-button[disabled] {
   opacity: 0.25;
   cursor: default;
 }
-.lake-button svg {
+button.lake-button svg {
+  display: inline-block;
   width: 16px;
   height: 16px;
   margin: 6px;
 }
-.lake-icon-button.lake-button-hovered {
+button.lake-icon-button.lake-button-hovered {
   background-color: var(--background-hover-color);
 }
-.lake-icon-button.lake-button-selected {
+button.lake-icon-button.lake-button-selected {
   background-color: var(--background-active-color);
 }
-.lake-text-button {
+button.lake-text-button {
   background-color: transparent;
   border: 1px solid var(--border-color);
   padding: 8px 16px;
 }
-.lake-text-button.lake-button-hovered {
+button.lake-text-button.lake-button-hovered {
   background-color: var(--background-hover-color);
 }
-.lake-text-button.lake-button-selected {
+button.lake-text-button.lake-button-selected {
   background-color: var(--background-active-color);
 }
-.lake-text-button svg {
+button.lake-text-button svg {
   background-color: transparent;
   margin: 0 6px 0 0;
   vertical-align: middle;
 }
-.lake-text-button span {
+button.lake-text-button span {
   display: inline-block;
   line-height: 16px;
   vertical-align: middle;
@@ -151,30 +155,34 @@
   font-size: 14px;
   user-select: none;
 }
-.lake-dropdown .lake-dropdown-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0;
-  margin-right: 4px;
+.lake-dropdown button.lake-dropdown-title {
+  box-sizing: content-box;
   border-radius: 5px;
   border: 0;
+  font-family: Arial;
   font-size: 14px;
+  color: var(--text-color);
   background-color: #fff;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-right: 4px;
   cursor: pointer;
 }
-.lake-dropdown[disabled] .lake-dropdown-title {
+.lake-dropdown[disabled] button.lake-dropdown-title {
   opacity: 0.25;
   cursor: default;
 }
-.lake-dropdown.lake-list-dropdown .lake-dropdown-title-hovered {
+.lake-dropdown.lake-list-dropdown button.lake-dropdown-title-hovered {
   background-color: var(--background-hover-color);
 }
-.lake-dropdown .lake-dropdown-title.lake-dropdown-title-no-down {
+.lake-dropdown button.lake-dropdown-title.lake-dropdown-title-no-down {
   margin-right: 0;
 }
 .lake-dropdown .lake-dropdown-text {
   height: 16px;
+  line-height: normal;
   margin: 6px;
   overflow: hidden;
   white-space: nowrap;
@@ -199,8 +207,8 @@
   left: 0;
   bottom: 0;
 }
-.lake-dropdown .lake-dropdown-title-no-down .lake-dropdown-icon svg,
-.lake-dropdown .lake-dropdown-title-no-down .lake-dropdown-icon img {
+.lake-dropdown button.lake-dropdown-title-no-down .lake-dropdown-icon svg,
+.lake-dropdown button.lake-dropdown-title-no-down .lake-dropdown-icon img {
   margin: 6px;
 }
 .lake-dropdown .lake-dropdown-down-icon {
@@ -217,6 +225,7 @@
   fill: var(--secondary-text-color);
 }
 .lake-dropdown .lake-dropdown-menu {
+  box-sizing: content-box;
   position: absolute;
   top: 30px;
   left: 0;
@@ -235,9 +244,9 @@
   display: flex;
   align-items: center;
   cursor: pointer;
+  margin: 0;
 }
 .lake-dropdown .lake-list-dropdown-menu li {
-  margin: 0;
   padding: 6px 24px 6px 10px;
 }
 .lake-dropdown .lake-list-dropdown-menu li.lake-dropdown-item-hovered {
@@ -308,6 +317,7 @@
 }
 .lake-dropdown .lake-color-dropdown-menu li .lake-dropdown-menu-text {
   font-size: 0;
+  box-sizing: content-box;
   border: 1px solid var(--background-hover-color);
   border-radius: 2px;
   width: 16px;
@@ -330,11 +340,18 @@
   height: auto;
 }
+.lake-popup {
+  font-family: var(--font-family);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
+  color: var(--text-color);
+}
 .lake-popup input[type="text"] {
+  box-sizing: content-box;
   font-family: var(--font-family);
   font-size: 14px;
   color: var(--text-color);
-  width: 200px;
   border-radius: 5px;
   border: 1px solid var(--input-border-color);
   padding: 4px 10px;
@@ -361,8 +378,9 @@
 .lake-container h4,
 .lake-container h5,
 .lake-container h6 {
-  color: #000000e0;
   font-weight: bold;
+  line-height: normal;
+  border: 0;
   margin: 0;
   padding: 0;
 }
@@ -478,6 +496,7 @@
   padding-left: 24px;
 }
 .lake-container ul[type="checklist"] li::before {
+  box-sizing: content-box;
   content: '';
   position: absolute;
   top: 3px;
@@ -495,6 +514,7 @@
   background-color: #fff;
 }
 .lake-container ul[type="checklist"] li::after {
+  box-sizing: content-box;
   content: '';
   position: absolute;
   top: 3px;
@@ -516,6 +536,7 @@
 }
 .lake-container blockquote {
+  box-sizing: content-box;
   margin: 0;
   margin-bottom: 8px;
   padding: 8px 12px;
@@ -526,24 +547,27 @@
   color: var(--text-color);
   border-radius: 8px;
 }
+.lake-container blockquote[type="info"],
+.lake-container blockquote[type="tip"] {
+  background-color: #e6f4ff;
+  border: 1px solid #91caff;
+}
 .lake-container blockquote[type="success"] {
   background-color: #f6ffed;
   border: 1px solid #b7eb8f;
 }
-.lake-container blockquote[type="info"] {
-  background-color: #e6f4ff;
-  border: 1px solid #91caff;
-}
 .lake-container blockquote[type="warning"] {
   background-color: #fffbe6;
   border: 1px solid #ffe58f;
 }
-.lake-container blockquote[type="error"] {
+.lake-container blockquote[type="error"],
+.lake-container blockquote[type="danger"] {
   background-color: #fff2f0;
   border: 1px solid #ffccc7;
 }
 .lake-container table {
+  box-sizing: content-box;
   border-collapse: collapse;
   border: 1px solid var(--border-color);
   margin-bottom: 8px;
@@ -639,11 +663,11 @@ lake-box[name="hr"] .lake-box-focused .lake-hr {
 .lake-image {
   position: relative;
   line-height: 0;
+  box-sizing: content-box;
   border: 1px solid transparent;
   border-radius: 4px;
 }
 .lake-image .lake-image-img {
-  box-sizing: border-box;
   border: 0;
   border-radius: 4px;
   width: 100%;
@@ -862,6 +886,8 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
 }
 .lake-code-block .lake-dropdown .lake-dropdown-menu {
   top: 24px;
+  left: auto;
+  right: 0;
   overflow-y: scroll;
   scrollbar-width: thin;
   height: 200px;
@@ -879,6 +905,7 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
   top: 0;
   left: 0;
   z-index: 1;
+  box-sizing: content-box;
   border: 1px solid var(--border-color);
   border-radius: 5px;
   padding: 16px;
@@ -917,13 +944,17 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
 }
 .lake-toolbar {
-  background-color: #fff;
+  font-family: var(--font-family);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
   padding: 4px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
 .lake-toolbar .lake-toolbar-divider {
+  box-sizing: content-box;
   width: 1px;
   height: 20px;
   margin: 0 4px;